<template>
  <div>
    <Edialog title="修改" :outershow="modelShow" @close="modelClose">
      <div style="padding: 0 20px">
        <el-button
          type="primary"
          @click="operateFn('add')"
          size="small"
          style="margin-bottom: 10px"
          >新增</el-button
        >
        <ETable
          style="margin-bottom: 10px"
          :data="tableData"
          :titleObj="titleObj"
          :page="pageInfo"
          operateWidth="90"
          :height="280"
          @switchChange="switchChange"
        >
          <template v-slot="{ scope }">
            <el-button @click="operateFn(scope)" type="text" size="small"
              >修改</el-button
            >
            <el-button @click="deleteFn(scope)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </ETable>
        <div class="daj">
          <Epagination
            :pageData="pageInfo"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
          ></Epagination>
        </div>
      </div>
      <!-- 内嵌新增修改 -->
      <Edialog
        internal
        :title="addAeditTitle"
        :outershow="addAeditShow"
        @close="addAeditClose"
        saveClick
        @saveFn="addAeditSaveFn"
      >
        <div style="padding: 0 20px">
          <el-form
            ref="modelRef"
            label-width="80px"
            :model="modelFrom"
            :rules="modelRules"
          >
            <el-form-item label="排序" prop="photoSort">
              <el-input-number
                v-model="modelFrom.photoSort"
                :min="1"
                label="描述文字"
                :step="1"
                step-strictly
              ></el-input-number>
            </el-form-item>
            <el-form-item label="封面" prop="photoUrl">
              <Eupload
                @uploadImg="uploadImg"
                :url="modelFrom.photoUrl"
                v-if="addAeditShow"
              ></Eupload>
            </el-form-item>
            <el-form-item label="链接地址" prop="" required>
              <div class="sele">
                <Eselect
                  :options="oneOptions"
                  :value="modelFrom.isOuterLink"
                  @EselectChange="modelFrom.isOuterLink = $event"
                  size="medium"
                ></Eselect>
                <Eselect
                  v-if="isInformation"
                  style="margin-left: 10px"
                  :options="twoOptions"
                  :value="modelFrom.linkType"
                  @EselectChange="modelFrom.linkType = $event"
                  size="medium"
                ></Eselect>
                <el-input
                  v-if="isLinkAddress"
                  style="margin-left: 10px"
                  v-model="modelFrom.linkAddress"
                  placeholder="请输入"
                  size="medium"
                ></el-input>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </Edialog>
    </Edialog>
  </div>
</template>

<script>
import ETable from "@/components/ETable/index2.vue";
import Edialog from "@/components/Edialog";
import Eselect from "@/components/Eselect";
import Eupload from "@/components/Eupload";
import Epagination from "@/components/Epagination";
import { getSelectData } from "@/utils/publicReq";
import {
  getBsBannerPhoto,
  putBsBannerPhoto,
  getBsBannerPhotoId,
  postBsBannerPhoto,
  postdoEnable,
  deleteBsBannerPhoto,
} from "@/api/management/banner";
import { fd } from "@/utils";
export default {
  name: "edit",
  components: {
    Edialog,
    Eselect,
    Eupload,
    ETable,
    Epagination,
  },
  data() {
    return {
      // 最外部的id
      id: "",
      // ----------------------- 表格 -----------------------
      // banner id
      bannerId: "",
      modelShow: false,
      // 表格数据
      tableData: [],
      // 表格头部
      titleObj: [
        {
          prop: "photoUrl",
          label: "图片",

          type: "img",
        },
        {
          prop: "isEnable",
          label: "启用状态",

          type: "radio",
        },
      ],
      // 分页数据
      pageInfo: {
        page: 1,
        size: 20,
        total: 0,
      },

      // ----------------------- form表单 -----------------------
      isInformation: false,
      isLinkAddress: false,
      // 如果是修改第一次不触发watch清掉后面的信息
      through: true,
      addAeditTitle: "新增",
      addAeditShow: false,
      modelFrom: {
        photoSort: 1,
        photoUrl: "",
        isLink: "",
        linkType: "",
        linkAddress: "",
        isOuterLink: "",
      },
      modelRules: {
        photoSort: [{ required: true, message: "请输入", trigger: "change" }],
        photoUrl: [{ required: true, message: "请上传", trigger: "change" }],
      },
      // 下拉框数据
      oneOptions: [
        {
          label: "无链接",
          value: "6",
        },
        {
          label: "内部",
          value: "0",
        },
        {
          label: "外部",
          value: "1",
        },
      ],
      twoOptions: [],
    };
  },
  watch: {
    "modelFrom.isOuterLink": {
      handler(newVal) {
        if (newVal !== "") {
          // 选的是无链接，后面两个不展示，内部都展示，外部只展示链接地址
          if (newVal === "6") {
            this.isInformation = false;
            this.isLinkAddress = false;
          } else if (newVal == 0) {
            this.isInformation = true;
            this.isLinkAddress = true;
          } else {
            this.isInformation = false;
            this.isLinkAddress = true;
          }
          if (!this.through) return (this.through = true);
          // 切换的时候清空其他两个框的数据
          this.modelFrom.linkType = "";
          this.modelFrom.linkAddress = "";
        }
      },
      immediate: true,
    },
  },
  methods: {
    // ------------------------ 表格 ------------------------
    // 打开表格dialog
    async modelOpen(scope) {
      // 修改需要页面展示内容
      this.id = scope.id;
      await this.getTableData(scope.id);
      this.modelShow = true;
    },
    async getTableData(bannerId) {
      let res = await getBsBannerPhoto({
        bannerId,
        currPage: this.pageInfo.page,
        pageSize: this.pageInfo.size,
      });
      if (res.data && res.data.bdata.total) {
        res.data.bdata.gdata.forEach((item) => {
          item.isEnable = item.isEnable ? true : false;
        });
        this.tableData = res.data.bdata.gdata;
        this.pageInfo.total = res.data.bdata.total;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
    },
    // 关闭表格dialog
    modelClose() {
      this.id = "";
      this.pageInfo.page = 1;
      this.pageInfo.size = 20;
      this.bannerId = "";
      this.pageInfo.total = 0;
      this.modelShow = false;
    },
    // 点击banner获取单条数据
    async getBannerId(id) {
      let res = await getBsBannerPhotoId(id);
      if (res.data && res.data.bdata) {
        this.modelFrom.photoSort = res.data.bdata.photoSort;
        this.modelFrom.photoUrl = res.data.bdata.photoUrl;
        if (res.data.bdata.isLink) {
          this.modelFrom.isOuterLink = res.data.bdata.isOuterLink.toString();
        } else {
          this.modelFrom.isOuterLink = "6";
        }
        this.modelFrom.linkType = res.data.bdata.linkType
          ? res.data.bdata.linkType.toString()
          : "";
        this.modelFrom.linkAddress = res.data.bdata.linkAddress
          ? res.data.bdata.linkAddress
          : "";
      }
    },
    // 表格启用状态按钮
    async switchChange(val) {
      let res = await postdoEnable(val.id);
      if (res.data && res.data.bcode == 0) {
        this.$message.success(res.data.bmsg);
        this.getTableData(this.id);
      } else {
        this.$message.error("操作失败");
        val.isEnable = !val.isEnable;
      }
    },
    // 删除
    async deleteFn(scope) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteBsBannerPhoto(scope.id);
        if (res.data && res.data.bcode == 0) {
          this.$message.success("删除成功");
          this.getTableData(this.id);
        }
      }
    },
    // 页码切换
    handleCurrentChange() {
      this.getTableData(this.id);
    },
    // 页数切换
    handleSizeChange() {
      this.pageInfo.page = 1;
      this.getTableData(this.id);
    },

    // ------------------------ 内部 ------------------------
    // 新增修改
    async operateFn(scope) {
      this.twoOptions = await getSelectData("010202004");
      if (scope == "add") {
        this.addAeditTitle = "新增";
        this.addAeditShow = true;
        return;
      }
      this.through = false;
      this.bannerId = scope.id;
      this.getBannerId(scope.id);
      this.addAeditTitle = "修改";
      this.addAeditShow = true;
    },
    // 保存事件
    addAeditSaveFn() {
      this.$refs.modelRef.validate(async (valid) => {
        if (valid) {
          let obj = JSON.parse(JSON.stringify(this.modelFrom));
          obj.bannerId = this.id;
          if (obj.isOuterLink == "6") {
            obj.isLink = 0;
            delete obj.linkAddress;
            delete obj.linkType;
            delete obj.isOuterLink;
          } else if (obj.isOuterLink == "0") {
            obj.isLink = 1;
            obj.isOuterLink = 0;
          } else {
            obj.isLink = 1;
            obj.isOuterLink = 1;
            delete obj.linkType;
          }
          let res;
          if (this.addAeditTitle == "新增") {
            res = await putBsBannerPhoto(fd(obj));
          } else {
            res = await postBsBannerPhoto(
              fd({
                ...obj,
                id: this.bannerId,
              })
            );
          }
          if (res.data && res.data.bcode == 0) {
            this.$message.success(res.data.bmsg);
            this.getTableData(this.id);
            this.addAeditClose();
          }
        }
      });
    },
    addAeditClose() {
      this.modelFrom = {
        photoSort: 1,
        photoUrl: "",
        linkType: "",
        isLink: "",
        isOuterLink: "",
        linkAddress: "",
      };
      this.isInformation = false;
      this.isLinkAddress = false;
      this.$refs.modelRef.resetFields();
      this.addAeditShow = false;
    },
    // 图片上传返回的方法
    uploadImg(val) {
      this.modelFrom.photoUrl = val;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .upload {
  display: block;
}
.sele {
  display: flex;
}
</style>
